<template>
  <div class="header">
    <el-row>
      <el-col :span="3"><div class="title">Clew</div></el-col>
      <div v-if="$store.state.rule === 100">
        <el-col :span="2"><!-- <div class="nav-item" v-on="{mouseenter:onEnter, mouseleave:onLeave}">日报管理</div> --></el-col>
        <el-col :span="2"><!-- <div class="nav-item" v-on="{mouseenter:onEnter, mouseleave:onLeave}">日报查询</div> --></el-col>
        <el-col :span="2" :push="19">
          <el-dropdown
            class="nav-item"
            @command="dropdownCommand">
            <div
              class="dropdown-title"
              style="color:#fff;">
              {{user_name}}<i class="el-icon-caret-bottom el-icon--right"></i>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="basicinfo" >个人信息</el-dropdown-item>
              <el-dropdown-item command="signOut">登出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </div>
      <div v-else>
        <slot>
          <el-col
            :span="2"
            :push="14">
            <div
              style="cursor:pointer;"
              class="nav-item"
              v-on="{mouseenter:onEnter, mouseleave:onLeave}"
              @click="sign('signIn')">
              Sign In
            </div>
          </el-col>
          <el-col
            :span="2"
            :push="14">
            <div
              style="cursor:pointer;"
              class="nav-item"
              v-on="{mouseenter:onEnter, mouseleave:onLeave}"
              @click="sign('signUp')">
              Sign Up
            </div>
          </el-col>
        </slot>
      </div>
    </el-row>
  </div>
</template>
<script>
import { mapState } from 'vuex'

export default {
  data () {
    return {
    }
  },
  computed: mapState({
    user_name: state => state.user.name.value
  }),
  methods: {
    dropdownCommand (command) {
      if (command === 'signOut') {
        this.$store.commit('signOut')
      } else if (command === 'basicinfo') {
        this.$router.push('/clew/basicinfo')
      }
    },
    sign (type) {
      this.$store.commit('changeSignType', type)
    },
    onEnter (e) {
      let el = e.target
      el.style.fontWeight = 'bold'
    },
    onLeave (e) {
      let el = e.target
      el.style.fontWeight = ''
    }
  }
}
</script>
<style scoped>
.header {
  background: #545c64;
  color: #fff;
  text-align: center;
}
.title {
  display: block;
  font-size: 25px;
  font-weight: bold;
  margin-top: 15px;
}
.nav-item {
  font-size: 18px;
  margin-top: 15px;
  margin-bottom: 15px;
}
img.avatar {
  margin-top: 10px;
  margin-bottom: 10px;
  width: 35px;
  height: 35px;
}
.dropdown-title {
  color:  #1ABC9C;
}
</style>

